

<!-- 余额提现 -->
<template>
	<view class="content">
		<!-- <view class="title">
			<image :src="icon.return" class="return" @tap="back"></image>
			<view class="search-input">余额提现</view>
			<view @click="gotoWithDetail()" class="btn-icon">提现记录</view>
		</view> -->
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="权益分兑现" colorTheme="black">
				<view slot="rightBtns">
					<view @click="gotoWithDetail()" class="btn-icon">兑现记录</view>
				</view>
			</navHeader>
		</view>
		
		<view class="bank">
			<view class="name">兑现至</view>
			<view v-if="!noBankFlag" @click="gotoMyBankPage()" class="msg">
				<image :src="imgSite + bankData.bankForm.logo"></image>
				<view class="bank-msg">
					<view class="bank-name">
						{{bankData.bankName}}
					</view>
					<view class="bank-number">
						{{bankData.cardNumber}}
					</view>
				</view>
				<image class="right" src="/static/images/user/integral/right.png"></image>
			</view>
			<view v-else>
				<view @click="gotoAddBankCard('add')" class="addBankCard-Container">
					+ 添加银行卡
				</view>
			</view>
		</view>
		
		<view class="bottom-block">
			<view class="row-between" style="width: 100%;padding: 30upx;padding-bottom: 0;font-size: 28upx;">
				<view style="color: #333333;">兑现权益分</view>
				<view style="font-size: 24upx;color: #666666;">1权益分=0.05元</view>
			</view>
			<view class="price">
				<text class="icon">￥</text>
				<view class="num"><input v-model="amount" type="num" maxlength="8" placeholder="0.00"/></view>
				<!-- <text class="min">最低提现金额{{minAmount/100}}元</text> -->
			</view>
			<view class="max">
				<view class="left-msg">可兑现权益分{{minAmount}}={{maxAmount}}元</view>
				<view @click="expenditureAll" class="right">全部兑换</view>
			</view>
		</view>
		<view class="add-btn" @click="getMoney()">立即兑现</view>
		<!-- 支付密码 -->
		<view v-if="showPayPassFlag" class="payPassBg-Container">
			<view class="setPass-Container">
				<view class="modalTitle">
					请输入支付密码
				</view>
				
				<!-- 关闭弹窗 -->
				<image @click="closePayModalHandler" :src="icon.closeModalBtn" class="closeModalBtn"></image>
				
				<view @tap="showFun" class="content">
					<view class="passwordBg-Container">
						<image class="password-bg" :src="icon.password" mode=""></image>
					</view>
					
					<view v-for="(item, index) in 6" :key="item" class="password-item">
						{{password[index] ? '●' :''}}
					</view>
				</view>
				
				<view class="forgetPass-Container">
					<view class="forgetPass">
						<view @click="gotoPayPassPage()">
							忘记密码？
						</view>
					</view>
				</view>
				
				<view class="confirmPayOuter-Container">
					<view @click="confirmPayHandler()" class="confirmPay-Container">
						确认兑换
					</view>
				</view>
			</view>
			<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
			
		</view>
		<uni-popup ref="popups" type="dialog">
		  <uni-popup-dialog
			  type="success"
			  mode="base"
			  title=""
			  :content="`本次兑现金额${reminder.cashAmount}元，税费${reminder.taxes}元，手续费${reminder.handlingFee}元，实际到账${reminder.actualAmount}元，确定继续兑现吗？`"
			  :leftBtnText="'取消兑现'"
			  :rightBtnText="'确认兑现'"
			  :before-close="true"
			  @close="dialogClose"
			  @confirm="dialogConfirm">
		  </uni-popup-dialog>
		</uni-popup>	
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	import navHeader from '@/components/nav-header/nav-header';
	import payKeyboard from '@/components/keyboard/keyboard';
	export default {
		computed: {
			...mapState(['imgSite'])
		},
		components: {
			navHeader,
			payKeyboard
		},
		data() {
			return {
				icon: {
					return: '/static/images/order/return.png',
					msgCenter: '/static/images/common/msg-center.png',
					password: "/static/images/order/pay/password.png",
					closeModalBtn: "/static/images/common/closeModal.png"
				},

				noBankFlag: true,
				bankData: {
					bankForm: {}
				},
				
				amount: 0.00,
				maxAmount: 0,
				minAmount: 0,
				
				//支付密码
				showPayPassFlag: false,
				show_key: false,
				password: '',
				reminder: {
					actualAmount: 0,
					cashAmount: 0,
					handlingFee: 0,
					taxes: 0,
				}
			};
		},
		onLoad(option) {
			//获取银行卡列表
			this.getMyBankCard_fun();
		},
		onShow() {
			
			var that = this;
			uni.$on('selectBankCard', function(bankCard) {
				that.bankData = bankCard;
				console.log(JSON.stringify(that.bankData));
			});
			//可提现金额
			this.getUserBalance_fun();
		},
		methods: {
			dialogClose(done){
				done()
			},
			dialogConfirm(done,value){
				done()
				this.getIfOrNotSetedPayPass();
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//goto提现记录
			gotoWithDetail() {
				uni.navigateTo({
					url: 'withDetail'
				});
			},
			
			
			//可提现金额
			getUserBalance_fun() {
				
				let that = this;
				this.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/convertibleEquity',
					method: 'POST',
					success: (res) => {
						this.maxAmount = res.data.response.dollar || 0;
						this.minAmount = res.data.response.point.toFixed(2) || 0;
					}
				});
			},
			
			
			//goto添加银行卡
			gotoAddBankCard(e,item) {
				uni.navigateTo({
					url: '/pagesUser/bankCard/addCard?type=add'
				});
			},
			
			//goto银行卡列表
			gotoMyBankPage() {
				uni.navigateTo({
					url: '/pagesUser/bankCard/myCard?selectFlag=true'
				});
			},
			
			
			//获取银行卡列表
			getMyBankCard_fun() {
				
				let that = this;
				this.$api.globalUtil.requestAjax({
					url: '/bankApi/getCustomerBankListApi',
					method: 'POST',
					success: function(res) {
						if(res.data.response.length) {
							var bankList = res.data.response;
							that.noBankFlag = false;
							that.bankData = bankList[0];
						}else {
							that.noBankFlag = true;
							that.bankData = {
								bankForm: {}
							};
						}
					}
				});
			},
			
			
			//全部提现
			expenditureAll() {
				this.amount = this.maxAmount;
			},
			
			
			//立即提现
			getMoney() {
				if(!this.bankData.cardNumber) {
					this.$api.msg('请选择银行卡');
					return ;
				}
				if(!this.amount || this.amount == 0) {
					this.$api.msg('请输入有效金额');
					return ;
				}
				var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
				if(!isNum.test(this.amount)) {
					this.$api.msg('请输入有效金额');
					return ;
				}
				
				// if(this.amount < this.minAmount / 100) {
				// 	this.$api.msg('最低提现金额'+(this.minAmount/100)+'元');
				// 	return ;
				// }
				if(this.amount > this.maxAmount) {
					this.$api.msg('最多可提现金额'+this.maxAmount.toFixed(2)+'元');
					return ;
				}
				this.redeemReminder()
				// this.getIfOrNotSetedPayPass();
			},
			
			redeemReminder () {
				this.$api.globalUtil.requestAjax({
					url: "/ExpenditureApi/redeemReminder",
					method: "POST",
					data: {
						cashAmount: this.amount
					},
					success: (res) => {
						if(!res.data.success) return that.$api.msg(res.data.errMsg);
						this.reminder = res.data.response;
						this.$refs.popups.open();
					}
				});
			},
			//忘记密码
			gotoPayPassPage() {
				uni.navigateTo({
					url: '/pagesUser/payPass'
				});
			},
			
			
			//是否设置了支付密码
			getIfOrNotSetedPayPass() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: "/CustomerApi/findCustomerByCustomerIdForApi",
					method: "POST",
					success: function(res) {
						if(res.data.success) {
							if(res.data.response.boundPayPwd) {
								that.showPayPassFlag = true;
							}else {
								that.$api.msg("请设置支付密码");
								setTimeout(function() {
									uni.navigateTo({
										url: '/pagesUser/payPass'
									})
								}, 2000);
							}
						}
					}
				});
			},
			
			
			//支付密码数字弹窗
			closePayModalHandler() {
				this.showPayPassFlag = false;
				this.$api.msg("取消提现");
			},
			showFun(){
				this.show_key = true;
			},
			hideFun(){
				this.show_key = false;
			},
			getPassword(n){
				this.password = n;
			},
			
			
			// 确认支付
			confirmPayHandler() {
				
				//余额支付
				this.amountBalancePay();
			},
			
			
			// 账户余额支付
			amountBalancePay() {
				
				if(this.password.length < 6) {
					this.$api.msg("请输入6位支付密码");
					return ;
				}
				
				var that = this;
				this.$api.globalUtil.requestAjax({
					url: '/ExpenditureApi/addExpenditureForApi',
					method: 'POST',
					data: {
						amount: that.amount,
						payPassword: that.password,
						bankName: that.bankData.bankName,
						bankCardNumber: that.bankData.cardNumber,
						bankCardUser: that.bankData.bankCardUser
					},
					success: function(res) {
						
						that.$api.msg('余额提现申请成功!');
						setTimeout(function() {
							uni.navigateBack({
								delta:1
							});
						}, 2000);
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page,
	.content {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	/deep/ .uni-popup-dialog{
	padding-bottom: 30upx;
		.uni-dialog-content{
	  padding: 5px 30px 15px 30px;
	}
	.uni-dialog-button-group{
	  padding: 30upx 68upx;
	  border: none;
	  .uni-dialog-button{
	    height: 100%;
	    border: 1upx solid #FE5E49;
	    border-radius: 35upx;
	  }
	  .uni-border-left{
	    background: #FE5E49;
	    margin-left: 44upx;
	  }
	  .uni-dialog-button-text{
	    padding: 21upx 0upx;
	    font-size: 30upx;
	    font-family: PingFang SC;
	    font-weight: 500;
	    color: #FE5E49;
	  }
	  .uni-button-color{
	    color: #FFFFFF;
	  }
	}
	}
	
	/* header部分 */
	.header-Container {
		z-index: 999;
		position: sticky;
		top: 0;
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
		
		.btn-icon {
			width: 100rpx;
			height: 51rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 31rpx;
		}
	}
	
	
	//银行卡
	.bank{
		background-color: white;
		margin-top: 20rpx;
		width: 100%;
		border-radius: 16rpx;
		.name{
			width: 690rpx;
			margin-left: 30rpx;
			height: 70rpx;
			color: #666666;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid#F5F5F5;
		}
		.msg{
			width: 690rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			width: 690rpx;
			height: 136rpx;
			image{
				width: 69rpx;
				height: 69rpx;
			}
			.bank-msg{
				height: 100%;
				padding-top: 28rpx;
				margin-left: 40rpx;
				.bank-name{
					color: #333333;
					font-weight: bold;
					font-size: 30rpx;
				}
				.bank-number{
					margin-top: 14rpx;
					color: #666666;
					font-size: 26rpx;
				}
			}
			.right{
				width: 18rpx;
				height: 30rpx;
				margin-left: auto;
			}
		}
	}
	.bottom-block{
		width: 100%;
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: white;
		.name{
			height: 57rpx;
			width: 100%;
			padding-left: 31rpx;
			padding-top: 30rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.price{
			display: flex;
			align-items: baseline;
			height: 163rpx;
			padding-top: 54rpx;
			color: #333333;
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid#EEEEEE;
			
			.icon{
				margin-left: 30rpx;
				line-height: 50rpx;
			    font-size: 60rpx;
			}
			.num {
				flex: 1;
				input {
					font-size: 60rpx;
					font-weight: bold;
				}
			}
			.min{
				display: flex;
				align-items: flex-end;
				margin-left: auto;
				margin-right: 30rpx;
				padding-top: 30rpx;
				color: #666666;
				font-size: 22rpx;
			}
		}
		
		.max{
			height: 87rpx;
			display: flex;
			align-items: center;
			.left-msg{
				color: #666666;
				font-size: 24rpx;
				height: 100%;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
			}
			.right{
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				font-size: 24rpx;
				color: #FE5E49;
				padding-right: 30rpx;
			}
		}
	}
	
	.add-btn {
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 600rpx;
		height: 90rpx;
		font-size: 33rpx;
		color: #fff;
		background: #FE5E49;
		border-radius: 45rpx;
		margin: 0 auto;
		margin-top: 137rpx;
	}
	
	
	
	
	// 添加银行卡
	.addBankCard-Container {
		margin: 0 auto;
		width:690rpx;
		height:100rpx;
		line-height: 100rpx;
		background:rgba(255,255,255,1);
		// border:1rpx solid rgba(252,224,224,1);
		box-shadow:0px 5rpx 10rpx 0px rgba(192,192,192,0.08);
		border-radius:10r	px;
		text-align: center;
		font-size:34rpx;
		font-family:PingFang;
		// font-weight:500;
		color: #FE5E49;
	}
	
	
	
	/* 支付密码 */
	.payPassBg-Container {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background:rgba(0,0,0,0.7);
		
		
		/* 设置密码 */
		.setPass-Container {
			position: fixed;
			bottom: 520rpx;
			width: 600rpx;
			height: 478rpx;
			background-color: #FFFFFF;
			border-radius:16rpx;
			
			/* 弹窗标题 */
			.modalTitle {
				margin-top: 50rpx;
				margin-bottom: 75rpx;
				width: 100%;
				height:30rpx;
				line-height:30rpx;
				text-align: center;
				font-size:30rpx;
				font-family:PingFang SC;
				// font-weight:bold;
				color:rgba(51,51,51,1);
			}
			
			/* 关闭按钮 */
			.closeModalBtn {
				z-index: 99999;
				position: absolute;
				top: 36rpx;
				right: 36rpx;
				width: 25rpx;
				height: 24rpx;
			}
			
			.content {
				position: relative;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				width: 100%;
				height: 90rpx;
				
				.passwordBg-Container {
					display: flex;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 90rpx;
					
					.password-bg {
						width: 535rpx;
						height: 90rpx;
					}
				}
				
				.password-item {
					position: relative;
					width: 90rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size:60rpx;
					font-family:PingFang;
					color:#333333;
					
					/* &.borderOneRpx:after {
						border-width: 4rpx;
						border-color: rgba(238,238,238,1);
						border-radius: 5rpx;
					} */
				}
			}
			
			
			/* 忘记密码 */
			.forgetPass-Container {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 170rpx;
				width:100%;
				
				.forgetPass {
					width:544rpx;
					height:40rpx;
					line-height: 70rpx;
					text-align: right;
					font-size:20rpx;
					font-family:PingFang SC;
					color: #FE5E49;
					line-height:40rpx;
				}
			}
			
			/* 确认支付 */
			.confirmPayOuter-Container {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 70rpx;
				width:100%;
				height:70rpx;
				
				.confirmPay-Container {
					width:544rpx;
					height:70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size:28rpx;
					font-family:PingFang SC;
					/* font-weight:500; */
					color:rgba(255,255,255,1);
					background: #FE5E49;
					border-radius:35rpx;
				}
			}
		}
	}
</style>



